<template>
  <div class="">
    <h1>{{ str }}</h1>
    <button @click="reverse">翻转</button>

    <hr />
    <input type="text" v-model="str" />

    <hr />
    <select v-model="pro">
      <option value="湖南省">湖南省</option>
      <option value="四川省">四川省</option>
      <option value="广东省">广东省</option>
    </select>

    <hr />
    <select v-model="pro2" multiple>
      <option value="湖南省">湖南省</option>
      <option value="四川省">四川省</option>
      <option value="广东省">广东省</option>
    </select>

    <hr />
    班长爱好：
    <input type="checkbox" v-model="isAll" value="全选" /> 全选 <br />
    <br />
    <input type="checkbox" v-model="hobby" value="篮球" /> 篮球 <br />
    <input type="checkbox" v-model="hobby" value="足球" /> 足球 <br />
    <input type="checkbox" v-model="hobby" value="乒乓球" /> 乒乓球 <br />

    <hr />
    班长性别： <br />
    <input type="radio" v-model="gender" :value="true" /> 男 <br />
    <input type="radio" v-model="gender" :value="false" /> 女 <br />

    <h1>表单v-model修饰符</h1>
    <input type="text" v-model.trim="dogName" />
    <input type="number" v-model.number="dogAge" />
    <input type="text" v-model.lazy="dogGender" />

    <!-- 补充：dom的onchange事件触发时机
            1.失去焦点+数据改变
            2.回车事件+数据改变
 -->
    <input type="text" id="" onchange="console.log(123)" />
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  data() {
    return {
      str: "No~~",
      pro: "四川省",
      pro2: ["四川省", "湖南省"],
      isAll: false,
      hobby: [],
      gender: true,
      dogName: "",
      dogAge: 0,
      dogGender: "男",
    };
  },
  created() {},
  methods: {
    reverse() {
      this.str = this.str.split("").reverse().join("");
    },
  },
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
</style>
